import {defineComponent, reactive} from "vue";
import style from "./css/index.module.css"
import Menu from "@/page/portal/mine/comp/Menu";
import Collect from "@/page/portal/mine/comp/Collect";
import Info from "@/page/portal/mine/comp/Info";
import Password from "@/page/portal/mine/comp/Password";
import Initiate from "@/page/portal/mine/Initiate";
import Donate from "@/page/portal/mine/comp/Donate";
import Member from "@/page/portal/mine/comp/Member";
export default defineComponent({
    setup(){
        const state = reactive({
            currentIndex:1
        })

        const changeIndex = (index)=>{
            state.currentIndex = index
        }
        const showContent = ()=>{
            switch (state.currentIndex) {
                case 1:
                    return <Info/>
                case 2:
                    return <Password/>
                case 3:
                    return <Collect/>
                case 4:
                    return <Donate/>
                case 5:
                    return <Member/>
                default:
                    return <Initiate/>
            }
        }
        return ()=>{

            return <>
                <div className={style.container}>
                    <div className={style.menu}>
                       <Menu
                           currentIndex={state.currentIndex}
                           changeIndex={changeIndex}
                       />
                    </div>
                    <div className={style.content}>
                        {showContent()}
                    </div>
                </div>
            </>
        }
    }
})